<template>
  <ul class="list">
    <router-link tag="li" v-for="(v, i) in masters" :key="'master' + i" :to="{path: '/mdetail', query: {id: v.id}}">
      <div class="infor">
        <figure class="avatar" :style="{backgroundImage: 'url('+ hasdomain(v.userPhoto) +')'}">
          <img v-if="false" :src="v.userPhoto">
        </figure>
        <div class="mation">
          <p class="name">
            <span>{{v.name}}</span>
            <mark :class="'c' + v.grade">{{v.grade_text}}</mark>
            <mark class="busy" v-if="v.isBusy*1">忙碌</mark>
          </p>
          <ul class="rate">
            <li v-for="(r) in 5" :key="'rev' + r">
              <img v-if="r <= (v.review*1 + 0.5)" src="@/assets/master/icon-star-red@2x.png">
              <img v-else src="@/assets/master/icon-star-grey@2x.png">
            </li>
            <li class="num"><span>{{v.review}}</span>分</li>
          </ul>
          <ul class="label">
            <li v-for="(t, n) in v.domain.split(',')" :key="n" v-if="t">{{t}}</li>
          </ul>
        </div>
        <div class="price">￥{{v.price}}起</div>
      </div>
      <p class="dec">{{v.content}}</p>
      <div class="vote vux-1px-t">
        <dl>
          <dt>
            <img src="@/assets/master/icon-order@2x.png">
          </dt>
          <dd><span>{{v.orderamount || 0}}</span>订单</dd>
        </dl>
        <dl>
          <dt>
            <img src="@/assets/master/icon-praise@2x.png">
          </dt>
          <dd><span>{{v.praiseAmount || 0}}</span>好评</dd>
        </dl>
        <dl>
          <dt>
            <img src="@/assets/master/icon-heart@2x.png">
          </dt>
          <dd><span>{{v.fans || 0}}</span>关注</dd>
        </dl>
      </div>
    </router-link>
  </ul>
</template>

<script>
export default {
  props: {
    masters: {
      type: Array,
      default: [],
    }
  }
}
</script>

<style scoped lang="less">
.list{
  background-color: @bgColor;
   > li{
    .mb(20);
    background-color: #ffffff;
    .infor{
      display: flex;
      position: relative;
      .pt(30);
      .pl(20);
      .pr(20);
      .avatar{
        .mr(26);
        .w(125);
        .h(125);
        .bri(20);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
      .mation{
        flex: 1;
        .name{
          display: flex;
          align-items: center;
          span{
            .f30;
          }
          mark{
            .f18;
            color: #ffffff;
            .bri(5);
            .ml(15);
            .pt(5);
            .pb(5);
            .pl(8);
            .pr(8);
            &.c10{
              background-color: #ff607a;
            }
            &.c20{
              background-color: #fead58;
            }
            &.c30{
              background-color: #59d3ac;
            }
            &.c40{
              background-color: #37c5e2;
            }
            &.c50{
              background-color: #9dc3e6;
            }
            &.busy{
              background-color: rgb(237, 126, 85);
            }
          }
        }
        .rate{
          display: flex;
          align-items: center;
          .mt(10);
          li{
            img{
              display: block;
              .w(20);
              .p(5);
            }
            &.num{
              .f20;
              .mt(4);
              span{
                .p(5);
              }
            }
          }
        }
        .label{
          display: flex;
          flex-wrap: wrap;
          .f16;
          li{
            .mt(12);
            color: @primary;
            border: 1px solid @primary;
            .bri(5);
            .mr(10);
            .padd(4, 9);
          }
        }
      }
      .price{
        position: absolute;
        .px2rem(top, 30);
        .px2rem(right, 20);
        .f26;
        .lh(50);
        color: #E73828;
      }
    }
    .dec{
      .f26;
      .lh(40);
      .px2rem(max-height, 114);
      .pt(18);
      .pl(20);
      .pr(20);
      .mb(18);
      overflow: hidden;
    }
    .vote{
      .f24;
      .h(62);
      display: flex;
      color: #999999;
      dl{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        dt img{
          display: block;
          .h(26);
        }
        dd span{
          .pl(10);
          .pr(10);
        }
      }
    }
  }
}
</style>
